<!DOCTYPE html>
<html>
<head>
    <meta charset=UTF-8>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv=X-UA-Compatible content="IE=edge,Chrome=1">
    <meta http-equiv=X-UA-Compatible content="IE=9">
    <title id="top-title"></title>
    <meta id="top-des" name="description">
    <meta name="ROBOTS" content="NOODP">
    <link rel="stylesheet" href="{$oss}/active/sixyear/css/style.css?v=7">
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <style type="text/css">
        body {
            width: 7.5rem;
            height: 13.34rem;
            padding: 0;
            user-select: none;
            overflow-x: hidden;
            margin: 0 auto;
        }

        .sign-info {
            background-color: #F8F9FA;
            position: relative;
            width: 7.5rem;
            height: 2.1rem;
        }

        .sign-avatar {
            background: url("{$data.sign_img[$data.sign_id -1]}") no-repeat;
            background-size: 1.2rem 1.2rem;
            width: 1.2rem;
            height: 1.2rem;
            border-radius: 1.2rem;
            position: absolute;
            left: 0.4rem;
            top: 0.5rem;
        }

        .sign-name {
            font-size: 0.5rem;
            color: #24252A;
            height: 0.7rem;
            position: absolute;
            left: 2.1rem;
            top: 0.53rem;
        }

        .sign-icon {
            background: url("https://oss.goddessxzns.com/web/week_fortune/sign-icon.png");
            background-size: 0.44rem 0.44rem;
            width: 0.44rem;
            height: 0.44rem;
            position: absolute;
            left: 3.9rem;
            top: 0.67rem;
        }

        .sign-name-en {
            font-size: 0.24rem;
            color: #24252A;
            height: 0.33rem;
            position: absolute;
            left: 2.1rem;
            top: 1.31rem;
        }

        .top {
            position: fixed;
            top: 0;
            left: 50%;
            transform: translate(-50%, 0);
            z-index: 6;
        }

        .top > nav {
            background-color: #FFFFFF;
            height: 1rem;
            box-sizing: border-box;
        }

        .top > nav > a {
            display: block;
            width: 1rem;
            line-height: 0.28rem;
            float: left;
            color: #9FA1AA;
            font-size: 0.32rem;
            text-decoration: none;
            position: relative;
            margin-left: 1.2rem;
            margin-top: 0.23rem;
        }

        .top > nav > a.active:after {
            content: "";
            background-color: #24252A;
            color: #24252A;
            font-weight: bold;
            display: block;
            width: 0.59rem;
            height: 0.06rem;
            border-radius: 0.03rem;
            position: absolute;
            left: 0;
            bottom: -0.2rem;
        }

        .box {
            padding-top: 0.2rem;
        }

        .box > .nav-content {
            height: 2.7rem;
        }

        .Bar-box {
            display: inline-block;
            width: 1rem;
            height: 3.3rem;
            margin-left: 0.54rem;
        }

        .Bar-box:nth-child(1) {
            margin-left: 0.17rem;
        }

        .Bar {
            border-radius: 0.24rem;
            position: relative;
            height: 2rem;
            width: 0.24rem;
            /* 宽度 */
            background-color: #f4f4f4;
            margin: 0 auto;
        }

        .Bar > div {
            border-radius: 0.25rem;
            width: 0.24rem;
            position: absolute;
            bottom: 0;
        }

        .text-a {
            color: #24252A;
            font-size: 0.24rem;
            display: block;
            width: 100%;
            height: 0.3rem;
            text-align: center;
            margin-top: 0.06rem;
        }

        .text-b {
            color: #9FA1AA;
            font-size: 0.24rem;
            display: block;
            width: 100%;
            height: 0.3rem;
            text-align: center;
            margin-top: 0.09rem;
        }

        .color {
            width: 7.5rem;
            height: 0.56rem;
        }

        .text-c {
            width: 1.5rem;
            text-align: center;
            font-size: 0.2rem;
            color: #9FA1AA;
            float: left;
        }

        .text-c span {
            width: 0.1rem;
            height: 0.1rem;
            display: inline-block;
            border-radius: 0.1rem;
        }

        .line-box {
            width: 7.5rem;
            height: 0.2rem;
            background-color: #F7F7F7;
            margin-top: 1.2rem;
        }

        .article-box {
            width: 6.7rem;
            margin: 0 auto;
        }

        .article-box p {
            font-size: 0.32rem;
            color: #24252A;
        }

        .article-title {
            font-weight: bold;
            text-align: center;
        }

        .article-time {
            font-weight: bold;
            text-align: center;
        }

        .article-content {
            white-space: pre-line;
            margin-top: 0.5rem;
            width: 6.7rem;
            text-align: left;
            line-height: 0.6rem;
            padding-bottom: 2rem;
        }

        .article-content p {
            font-size: 0.28rem;
            color: #565659;
            margin-top: 0.35rem;
            text-indent: 2em;
        }

        .bottom {
            width: 100%;
            height: 1rem;
            position: fixed;
            z-index: 4;
            left: 0;
            bottom: 0;
            color: #fff;
        }

        .shadow {
            width: 100%;
            height: 1rem;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
        }

        .bo-left {
            width: 0.44rem;
            height: 0.44rem;
            line-height: 0.44rem;
            font-size: 0.3rem;
            display: block;
            float: left;
            position: relative;
            z-index: 2;
            text-align: center;
            border: 0.01rem solid #fff;
            border-radius: 50%;
            margin: 0.24rem 0.28rem 0.24rem 0.19rem;
        }

        .bo-logo {
            padding: 0.15rem 0;
            float: left;
            position: relative;
            z-index: 2;
        }

        .bo-logo img {
            width: 0.7rem;
            height: 0.7rem;
            border-radius: 0.05rem;
        }

        .bo-des {
            width: 5.8rem;
            height: 1rem;
            line-height: 1rem;
            float: left;
            position: relative;
            z-index: 2;
            padding-left: 0.28rem;
            box-sizing: border-box;
            font-size: 0.30rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
        }

        .bo-btn {
            float: right;
            height: 1rem;
            position: absolute;
            right: 0;
            z-index: 3;
            background-color: #6478FF;
        }

        .bo-btn a {
            display: block;
            width: 1.7rem;
            height: 1rem;
            text-align: center;
            color: #fff;
            text-decoration: none;
            line-height: 1rem;
            font-size: 0.30rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            outline: none;
        }

        .pop-box {
            position: absolute;
            top: 0;
            left: 0;
        }

        .pop-shadow {
            background-color: #000000;
            opacity: 0.5;
            z-index: 7;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

        .pop {
            border-radius: 0.2rem;
            width: 6.5rem;
            height: 8rem;
            background-color: #FFFFFF;
            z-index: 8;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .pop-title {
            color: #24252A;
            font-size: 0.5rem;
            position: relative;
            top: 0.6rem;
            left: 0.6rem;
            margin-bottom: 1.2rem;
        }

        .pop-img {
            width: 2.16rem;
            height: 1.5rem;
            float: left;
            text-align: center;
            font-size: 0.26rem;
        }

        .pop-sign-img {
            display: inline-block;
            width: 0.88rem;
            height: 0.88rem;
        }

        .pop-close {
            width: 0.32rem;
            height: 0.32rem;
            background: url("https://oss.goddessxzns.com/web/week_fortune/close.png");
            background-size: 0.32rem 0.32rem;
            position: fixed;
            top: 10%;
            left: 85%;
            transform: translate(-10%, -85%);
            z-index: 9;
        }

        .pop-sign-name {
            margin-bottom: 0.3rem;
            font-weight: bold;
        }
    </style>
</head>
<body>

<div id=app>
    <div style="width: 100%;height: 3.56rem"></div>
    <div class="top">
        <div class="sign-info">
            <div onclick="open_sign()">
                <div class="sign-avatar"></div>
                <div>
                    <div class="sign-name">{$data.sign_name[$data.sign_id -1]}</div>
                    <div class="sign-icon"></div>
                    <div class="sign-name-en"></div>
                </div>
            </div>
        </div>
        <nav>
            <a class="tab tab1 active" onclick="changeTab(1)" data-index="1">本周</a>
            <a class="tab tab2" onclick="changeTab(2)" data-index="2">本月</a>
            <a class="tab tab3" onclick="changeTab(3)" data-index="3">本年</a>
        </nav>
    </div>
    <div class="box">
        <div class="nav-content">
            <div class="cont">
            </div>
        </div>
    </div>
    <div class="line-box"></div>
    <div class="article-box">
        <p class="article-title" style="margin-top: 0.8rem;margin-bottom: 0.2rem"></p>
        <p class="article-time"></p>
        <div class="article-content"></div>
    </div>
</div>

<div class="pop-box" style="display: none">
    <div class="pop-shadow"></div>
    <div class="pop">
        <div class="pop-close" onclick="close_sign()"></div>
        <div class="pop-title">十二星座列表</div>
        {foreach name="data.sign_img" item="img_data" key="k" }
        <div class="pop-img">
            <div class="pop-sign-img" style="background: url('{$img_data}');background-size: 0.88rem 0.88rem;"
                 onclick="choice_sign({$k})"></div>
            <!--            <img sty src="{$img_data}" alt="白羊座" onclick="choice_sign({$k})">-->
            <p class="pop-sign-name">{$data.sign_name[$k]}</p>
        </div>
        {/foreach}
    </div>
</div>

<div class="bottom" id="bottom">
    <div class="shadow"></div>
    <div class="bo-left" id="close" onclick="closeApp()">x</div>
    <div class="bo-logo">
        <img src="{$oss}/uploads/20180329/33503860a02a86f4c23d59ac75ec5b59.jpg" alt="">
    </div>
    <div class="bo-des">启动APP体验更多惊喜</div>
    <div class="bo-btn">
        <a href="javascript:;" id="btn">打开APP</a>
    </div>
</div>

{include file="../apps/web/view/public/sensors.html" /}
<script type="text/javascript" src="/static/rem-suit.js"></script>
<script src="{$oss}active/seven/js/jquery-v2.1.1.min.js"></script>
<script src="/static/valentine/2021/js/jmlink.min.js"></script>
<script language="javascript">
    var type = '{$data.type}'
    var index = '{$data.sign_id}'
    var data = [];
    var topTitle = '';
    var topDes = '';

    var signImg = JSON.parse('{$data.sign_img_encode}');
    var signName = JSON.parse('{$data.sign_name_encode}');
    var colors = JSON.parse('{$data.colors}');

    var share_url = '{$domain}/article/web/week_share_details?in_sign=' + index + '&type=' + type + '&version={$version}';


    /**
     * 页面初始化
     * @param type_tmp
     */
    function init(type_tmp) {
        var text_tmp = '';
        switch (parseInt(type_tmp)) {
            case 1:
                topTitle = '本周运势来啦';
                topDes = '本周（{$data.timeInfo}），快来看看你的星座运势，准有好运！';
                text_tmp = 'WEEKLY FORTUNE';
                break;
            case 2:
                topTitle = '本月运势来啦';
                topDes = '本月（{$data.timeInfo2}），快来看看你的星座运势，准有好运！';
                text_tmp = 'MONTHLY FORTUNE';
                break;
            case 3:
                topTitle = '本年运势来啦';
                topDes = '本年（{$data.timeInfo3}），快来看看你的星座运势，准有好运！';
                text_tmp = 'ANNUAL FORTUNE';
                break;
        }
        $('.sign-name-en').text(text_tmp);
        $('#top-title').text(topTitle);
        $('#top-des').attr('content', topDes);
        $('.tab').removeClass('active');
        $('.tab' + type_tmp).addClass('active')
        $('.tab' + type_tmp).css('color', '#24252A')
    }


    /**
     * 获取周运信息
     * @param type_tmp
     * @param index_tmp
     */
    function getWeekArticle(type_tmp, index_tmp) {
        $.ajax({
            async: false,
            contentType: 'application/x-www-form-urlencoded',
            type: 'get',
            url: '{$domain}/article/web/fortune_detail?in_sign=1',
            data: {in_sign: index_tmp},
            dataType: 'json',
            success: function (result, status, xhr) {
                // alert("错误提示： " + xhr.status + " " + xhr.statusText);
                console.log(result.data)
                if (result.code === 200) {
                    data = result.data
                } else {
                    alert(result.msg)
                }
            },
            error: function (xhr, status, error) {
                // alert("错误提示： " + xhr.status + " " + xhr.statusText);
                console.log(error)
            },
            timeout: 100,
        })
        addWeekContent(type_tmp, data)
    }


    $(function () {
        new JMLink({
            jmlink: 'https://axelkv.mlinks.cc/AesI',// 短链地址
            button: document.querySelector('a#btn'),
            plhparams: {
                target: 'link',
                link: "{$domain}/article/web/week_share_details"
            }
        });
        init(type);
        getWeekArticle(type, index)

        $('.box nav a').click(function () {
            $(this).css('color', '#24252A')
            $(this).addClass('active').siblings().css('color', '#9FA1AA');
            $(this).addClass('active').siblings().removeClass('active');
        })

        wx.config({
            debug: false,
            appId: '{$signPackage.appId}',
            timestamp: {$signPackage.timestamp},
            nonceStr: '{$signPackage.nonceStr}',
            signature: '{$signPackage.signature}',
            jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
        });
        wx.ready(function () {
            //分享给朋友
            wx.onMenuShareAppMessage({
                title: topTitle, // 分享标题
                desc: topDes, // 分享描述
                link: share_url, // 分享链接
                imgUrl: 'https://oss.goddessxzns.com/picture/uploads/logo.png?x-oss-process=style/show', // 分享图标
                type: 'link', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
            //分享朋友圈
            wx.onMenuShareTimeline({
                title: topTitle, // 分享标题
                link: share_url, // 分享链接$signPackage.url
                imgUrl: 'https://oss.goddessxzns.com/picture/uploads/logo.png?x-oss-process=style/show', // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
            // 分享到QQ
            wx.onMenuShareQQ({
                title: topTitle, // 分享标题
                desc: topDes, // 分享描述
                link: share_url, // 分享链接
                imgUrl: 'https://oss.goddessxzns.com/picture/uploads/logo.png?x-oss-process=style/show', // 分享图标
                success: function () {
                },
                cancel: function () {
                }
            });
            // 微信到腾讯微博
            wx.onMenuShareWeibo({
                title: topTitle, // 分享标题
                desc: topDes, // 分享描述
                link: share_url, // 分享链接
                imgUrl: 'https://oss.goddessxzns.com/picture/uploads/logo.png?x-oss-process=style/show', // 分享图标
                success: function () {
                },
                cancel: function () {
                }
            });
            // 分享到QQ空间
            wx.onMenuShareQZone({
                title: topTitle, // 分享标题
                desc: topDes, // 分享描述
                link: share_url, // 分享链接
                imgUrl: 'https://oss.goddessxzns.com/picture/uploads/logo.png?x-oss-process=style/show', // 分享图标
                success: function () {
                },
                cancel: function () {
                }
            });

        });
    })


    /**
     * 修改tab
     * @param index_tmp
     */
    function changeTab(type_tmp) {
        addWeekContent(type_tmp, data)
        var text_tmp = '';
        switch (type_tmp) {
            case 1:
                topTitle = '本周运势来啦';
                topDes = '本周（{$data.timeInfo}），快来看看你的星座运势，准有好运！';
                text_tmp = 'WEEKLY FORTUNE';
                break;
            case 2:
                topTitle = '本月运势来啦';
                topDes = '本月（{$data.timeInfo2}），快来看看你的星座运势，准有好运！';
                text_tmp = 'MONTHLY FORTUNE';
                break;
            case 3:
                topTitle = '本年运势来啦';
                topDes = '本年（{$data.timeInfo3}），快来看看你的星座运势，准有好运！';
                text_tmp = 'ANNUAL FORTUNE';
                break;
        }
        $('.sign-name-en').text(text_tmp);
        $('#top-title').text(topTitle);
        $('#top-des').attr('content', topDes);
        share_url = '{$domain}/article/web/week_share_details?in_sign=' + index + '&type=' + type_tmp + '&version={$version}';
        window.location.href = share_url;
    }

    /**
     * 柱状图及文章信息页面
     * @param e
     * @param type_tmp
     * @param data_tmp
     */
    function addWeekContent(type_tmp, data_tmp) {
        $('.cont').empty();
        $('.article-content').empty();
        var type_fortune;
        switch (parseInt(type_tmp)) {
            case 1:
                type_fortune = 'fortune_week';
                break;
            case 2:
                type_fortune = 'fortune_month';
                break;
            case 3:
                type_fortune = 'fortune_year';
                break;
            default :
                console.log('文章类型异常')
                break;
        }
        var score_list = data_tmp[type_fortune].score_list;
        var week_content = '';
        for (item in score_list) {
            week_content += `<div class="Bar-box">
                    <div class="Bar">
                        <div style="height: ` + score_list[item].percent + `%;background: ` + score_list[item].color + `"></div>
                    </div>
                    <div class="text-a">` + score_list[item].name + `</div>
                    <div class="text-b">` + score_list[item].score + `</div>
                </div>`;
        }
        week_content += ` <div class="color">`
        for (item in colors) {
            week_content += `
                <div class="text-c">
                    <span style="background-color: ` + colors[item].color + `"></span> ` + colors[item].name + `
                </div>`
        }
        week_content += `</div>`;
        $('.cont').append(week_content);

        $('.article-title').text(data_tmp[type_fortune].title);
        $('.article-time').text(data_tmp[type_fortune].introduction);

        var content_tmp = data_tmp[type_fortune].content;
        content_tmp_arr = content_tmp.split(/[(\r\n)\r\n]+/);
        content_tmp_arr.forEach((item, index) => {
            if (!item) {
                content_tmp_arr.splice(index, 1);//删除空项
            } else {
                content_tmp_arr[index] = '<p>' + item + '</p>';
            }
        })
        $('.article-content').append(content_tmp_arr);
    }

    /**
     * 选择星座
     * @param index_tmp
     */
    function choice_sign(index_tmp) {
        $('body').css('overflow', 'auto')
        index = index_tmp + 1;
        $('.pop-box').css('display', 'none');
        $('.sign-avatar').css("background-image", "url(" + signImg[index_tmp] + ")");
        $('.sign-name').text('' + signName[index_tmp] + '');
        var type_tmp = $('.active').data('index');
        share_url = '{$domain}/article/web/week_share_details?in_sign=' + (index_tmp + 1) + '&type=' + type_tmp + '&version={$version}';
        window.location.href = share_url;

        //重新发起请求
        getWeekArticle(type_tmp, index_tmp + 1)
    }

    /**
     * 打开星座
     */
    function open_sign() {
        $('body').css('overflow', 'hidden')
        $('.pop-box').css('display', 'block');
    }

    /**
     * 关闭星座
     */
    function close_sign() {
        $('body').css('overflow', 'auto')
        $('.pop-box').css('display', 'none');
    }


    /**
     * 关闭启动
     */
    function closeApp() {
        $('#bottom').css('display', 'none');
    }
</script>
</body>
</html>
